<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>${customer.username} 个人中心</title>
    <script src="http://10.222.29.156:3456/js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="http://10.222.29.156:3456/css/bootstrap.css">
    <link rel="stylesheet" href="http://10.222.29.156:3456/css/bootstrap-theme.css">
    <script src="http://10.222.29.156:3456/js/bootstrap.js"></script>
</head>
<body style="font-size: 16px; background-image: url(http://10.222.29.156:3456/images/geometry2.png);">
    <div>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid" style="margin-left: 20%; margin-right: 20%;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
                    <a class="navbar-brand" href="${contextPath }/sec/home">M 系统</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="${contextPath }/sec/home">首页</a></li>
                        <li><a href="${contextPath }/sec/food">地址管理</a></li>
                        <li class="active"><a href="${contextPath }/sec/merchant">订单信息</a></li>
                  <!--   <li><a href="${contextPath }/sec/merchant">广告信息</a></li>
                    <li><a href="${contextPath }/sec/merchant">评论信息</a></li> -->
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown">商家 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu"
                            aria-labelledby="dropdownMenu">
                            <li class="divider"></li>
                            <li><a href="${contextPath }/sec/merchant">详情</a></li>
                            <li><a href="${contextPath }/sec/exit.action">
                            退出</a></li>
                        </ul></li>
                </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <br>
    <br>
    <br>
    <br>
    <div class="container">
        <div class="well center-block">
            <div class="panel panel-success">
                <div class="panel-heading" align="center">
                    <h4>所有订单</h4>
                </div>
                <div class="panel-body" style=" height:600px; overflow:auto">
                    <table class="table table-bordered table table-striped" id="orderInfoList">
                        <tr align="center">
                            <td>订单编号</td>
                            <td>下单顾客</td>
                            <td>下单时间</td>
                            <td>订单状态</td>
                            <td>查看详情</td>
                        </tr>             
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal box -->
    <div class="modal fade" id="orderInfoDetailModel" tabindex="-1" role="dialog" aria-labelledby="updateModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="panel panel-success">
                        <div class="panel-heading modal-header" align="center">
                        
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title" id="updateModelLabel">订单详情</h3>
                        </div>
                   

                        <div class="modal-body panel-body ">   
                            <div class="col-md-offset-3 ">
                                
                                <h4>
                                    <label>订单编号&nbsp;&nbsp;</label>
                                    <label id="orderInfoId"></label>
                                </h4>
                            
                                <h4>
                                    <label >顾客姓名&nbsp;&nbsp;</label>
                                    <label id="customerName"></label>
                                </h4>
                                <h4>
                                    <label>下单日期&nbsp;&nbsp;</label>
                                    <label></label>
                                </h4>
                                <h4>
                                    <label>订单内容&nbsp;&nbsp;</label><br>
                                    <table class="col-md-offset-3">
                                        
                                    </table>
                                </h4>
                                <h4>
                                    <label>订单总额&nbsp;&nbsp;</label>
                                    <label></label>
                                </h4>
                                <h4>
                                    <label>订单电话&nbsp;&nbsp;</label>
                                    <label></label>
                                </h4>
                                <h4>
                                    <label>订单地址&nbsp;&nbsp;</label>
                                    <label></label>
                                </h4>
                                <h4>
                                    <label>订单状态&nbsp;&nbsp;</label>
                                    <label></label>
                                </h4>
                            </div>
                        </div>

                    
                        <div class="modal-footer panel-heading">
                            <div class="col-md-offset-3 col-md-1 ">
                                <button type="submit" class="btn btn-default" name="button1"></button>
                            </div>
                            <div class="col-md-offset-1 col-md-1 ">
                                <button type="submit" class="btn btn-default" name="button2"></button>
                            </div>
                            <div class="col-md-offset-1 col-md-1">
                                <button class="btn btn-default" data-dismiss="modal" >返回</button>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            var op = orderInfoList();
            op.createTable();

            function orderInfoList(){
                var rs = {};

                rs.createTable=function(){

                    var orderInfoTableTr ='<tr align="center"><td name="orderInfoId"></td><td name="customerName"></td><td name="date"></td><td name="status"></td><td><button  class="btn btn-success btn-primary btn-sm" data-target="#orderInfoDetailModel" data-toggle="modal">查看详情</button></td></tr>';
                    $.ajax({
                        url: "/o2o-merchant/sec/rest/orderInfo",
                        type: "get",
                    }).done(function (msg) {
                       msg.forEach((item,index)=>{
                            let orderInfo=$(orderInfoTableTr)
                            let orderInfoId = item.id;
                            let orderDetail = item;
                            orderInfo.children().eq(0).text(orderInfoId);
                            orderInfo.children().eq(1).text(item.customer);
                            orderInfo.children().eq(2).text(item.orderDate);
                            orderInfo.children().eq(3).text(item.orderStatus);
                            orderInfo.find("button").attr("id",orderInfoId)
                            var btn = orderInfo.find("button");
                            btn.on("click",function(){
                                rs.creatModel(orderDetail);
                            })
                            $("table").eq(0).append(orderInfo);
                        })


                    });
                    
                }

                rs.creatModel=function(orderDetail){
                    var model = $("#orderInfoDetailModel");
                        model.find("table").empty();
                        model.find("h4").eq(0).children().eq(1).text(orderDetail.id);
                        model.find("h4").eq(1).children().eq(1).text(orderDetail.customer);
                        model.find("h4").eq(2).children().eq(1).text(orderDetail.orderDate);
                        model.find("h4").eq(5).children().eq(1).text(orderDetail.receiverInfo);
                        model.find("h4").eq(6).children().eq(1).text(orderDetail.receiverInfo );
                        model.find("h4").eq(7).children().eq(1).text(orderDetail.orderStatus);
                        let table = "<tr><td></td><td></td></tr>";
                        let totalPrice = 0;
                        orderDetail.items.forEach((item,index)=>{
                            let table1=$(table);
                            table1.children().eq(0).text(item.food.name);
                            table1.children().eq(1).text("   ×  "+item.total);
                            totalPrice += item.food.price*item.total;
                            model.find("table").append(table1);
                        })
                        model.find("h4").eq(4).children().eq(1).text(totalPrice);
                        if(orderDetail.orderStatus=="WAITING"){
                            let btn1 = model.find("button[name='button1']");
                            let btn2 = model.find("button[name='button2']");
                            btn1.text("接受");
                            btn2.text("拒绝");
                            btn1.on("click",function(){
                                rs.updateOrder(orderDetail.id,"RECEIVE");
                            })
                            btn2.on("click",function(){
                                rs.updateOrder(orderDetail.id,"REJECT");
                            })
                        }else if(orderDetail.orderStatus=="RECEIVE"){
                            let btn1 = model.find("button[name='button1']");
                            let btn2 = model.find("button[name='button2']");
                            btn1.text("派送");
                            btn2.hide();
                            btn1.on("click",function(){
                                rs.updateOrder(orderDetail.id,"DELIVERING");
                            })
                        }else{
                            let btn1 = model.find("button[name='button1']");
                            let btn2 = model.find("button[name='button2']");
                            btn1.hide();
                            btn2.hide();
                        }
                        
                }

                rs.updateOrder=function(orderInfoId,orderStatus){
                    $.ajax({
                        url: "/o2o-merchant/sec/rest/orderInfo/"+orderInfoId+"/"+orderStatus,
                        type: "get"
                    }).done(function(){
                        $("#orderInfoDetailModel").hide();
                        window.location.href = '/o2o-merchant/sec/order';
                    })
                }
                return rs;

            }

        });

    </script>

</body>

</html>